<template>
  <view>
    <view class="p-specifications" @click="handleOpen">
      <view :class="['title',{bold}]">参数</view>
      <view class="content">{{ attrStr }}</view>
      <view class="icon">
        <x-icon name="icon-017" size="24" color="#999999" />
      </view>
    </view>
    <p-drawer-spec v-if="specVisible" :visible.sync="specVisible" :attr-list="attrList" />
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';
import PDrawerSpec from '../p-drawer-spec';

export default {
  name: 'PSpecifications',
  components: {
    XIcon,
    PDrawerSpec
  },
  props: {
    attrList: {
      type: [Array, null],
      default: () => []
    },
    bold: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      specVisible: false
    };
  },
  computed: {
    attrStr() {
      if (!this.attrList || this.attrList.length === 0) return '无';
      return this.attrList.map(item => item.attrName + '：' + item.attrValue).join(' ');
    }
  },
  methods: {
    handleOpen() {
      if (!this.attrList || this.attrList.length === 0) {
        return;
      }
      this.specVisible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.p-specifications{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30px;
  .title{
    color: #888888;
    &.bold{
      font-weight: 500;
    }
  }
  .content{
    padding: 0 20px;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .icon{
    width: 24px;
    height: 24px;
  }
}
</style>
